<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    #homepage_notifications .shareWinAColorLine{color: #00aaff; text-decoration:none;}
    #homepage_notifications .shareWinHrColor{border-bottom: 1px solid #f2f2f2; border-top:none; border-left: none; border-right: none;}
</style>

<div id="homepage_notifications" class="wp_fz_12">
    <div id="homepage_notifications_alert_body">
        <div id="homepage_notifications_alert_body_content">
             
        </div>
        
        <div id="homepage_notifications_alert_body_flex" class="wp_mb_10 wp_mt_10" style="text-align:center; display: none;">
            <a href = "#" id="homepage_notifications_see_all_a" class="wp_fz_11 btn shareWinAColorLine" style="text-decoration:none;">See All Notifications</a>
        </div>
    </div>

    <div id="homepage_notifications_messages_body">
        <div id="homepage_notifications_messages_body_content" class="wp_mb_10">
            <div id="homepage_notifications_messages_body_content_list">

            </div>
            <div id="homepage_notifications_body_detail_flex" class="wp_mt_10" style="text-align:center; display: none;">
                <a href = "#" id="homepage_notifications_del_alert_history" class="wp_fz_11 btn shareWinAColorLine" style="text-decoration:none;">Clear your history</a>
            </div>
        </div>
    </div>
</div>

<script type="text/x-kendo-template" id="notification_single_message_win_template">
    <p class="wp_ml_15 wp_mr_15 wp_mt_10 wp_mb_10">
        # var notificationTargetId, str1, str2, index, title, len, keyword = "funding request", aId, keyArray, separator = ":";#
        # if (data.NotificationType.toLowerCase() == 'c') { #
            # notificationTargetId = data.CommunityId; #
        # } else { #
            # notificationTargetId = data.TargetuserId; #
        # } #
        
        # if (data.EntityType.indexOf('PfizerDemo') > -1) { #
            # title = data.notificationTitle; #
            # index = title.toLowerCase().indexOf(keyword) + 8; #
            # len =  keyword.length - 8; #
            # str1 = title.substring(data.actionPerformerId.length, index); #
            # str2 = title.substring(index + len); #
            <a id="PfizerDemo_#:data.actionPerformerId#_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
            #: str1 #
            <a id="PfizerDemo_notification_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsRequestLink('#: data.NotificationId #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')">#: title.substr(index, len) #</a>
            #: str2 #
        #} else if (data.actionType.indexOf('like') > -1) { #
            <a id="Like_#:data.actionPerformerId#_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
            liked your
            <a id="Like_notification_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUpdateLink('#: data.NotificationId #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')">update.</a>
        #} else if (data.actionType.indexOf('comment') > -1) { #
            <a id="Comment_#:data.actionPerformerId#_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
            has commented on your
            <a id="Comment_notification_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUpdateLink('#: data.NotificationId #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')">update.</a>
        #} else if (data.actionType.indexOf('follow') > -1) { #
            <a id="Follow_#:data.actionPerformerId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
            has started following you.
        #} else {#
            #len = data.nTitle.length;#
            #for (var i = 0; i < len; i++) {#
                #: data.nTitle[i].comm #
                #if (data.nTitle[i].pType) {#
                    # aId = data.nTitle[i].pVal + "_" + i; #
                    #if (data.nTitle[i].pType == 'user') {#
                        <a id="notification_user_#: aId #" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.nTitle[i].pVal #')">#: data.nTitle[i].showText #</a>
                    #} else if (data.nTitle[i].pType == 'notification') {#
                        <a id="notification_win_#: aId #" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.openNotificationsWin('#: data.nTitle[i].pVal #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')"> #: data.nTitle[i].showText # </a>
                    #} else if (data.nTitle[i].pType == 'url') {#
                        <a id="notification_url_#: i #" href="#: data.nTitle[i].pVal #" target="_blank" style="text-decoration:none;" class="shareWinAColorLine"> #: data.nTitle[i].showText # </a> 
                    #}#
                #}#
            #}#
        #}#
    </p>
    <hr class="shareWinHrColor" />
</script>

<script type="text/x-kendo-template" id="notification_messages_win_template">
    <div class="wp_ml_15 wp_mr_15 wp_mt_10 wp_mb_10">
        <p>
            #var notificationTargetId, str1, str2, index, title, len, keyword = "funding request"; #
            #if (data.NotificationType.toLowerCase() == 'c') {#
                #notificationTargetId = data.CommunityId;#
            #} else {#
                #notificationTargetId = data.TargetuserId;#
            #}#

            # if (data.EntityType.indexOf('PfizerDemo') > -1) { #
                # title = data.notificationTitle; #
                # index = title.toLowerCase().indexOf(keyword) + 8; #
                # len =  keyword.length - 8; #
                # str1 = title.substring(data.actionPerformerId.length, index); #
                # str2 = title.substring(index + len); #
                <a id="PfizerDemo_#:data.actionPerformerId#_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
                #: str1 #
                <a id="PfizerDemo_notification_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsRequestLink('#: data.NotificationId #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')">#: title.substr(index, len) #</a>
                #: str2 #
            #} else if (data.actionType.indexOf('like') > -1) { #
                <a id="Like_#:data.actionPerformerId#_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
                liked your
                <a id="Like_notification_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUpdateLink('#: data.NotificationId #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')">update.</a>
            #} else if (data.actionType.indexOf('comment') > -1) { #
                <a id="Comment_#:data.actionPerformerId#_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
                has commented on your
                <a id="Comment_notification_#:data.NotificationId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUpdateLink('#: data.NotificationId #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')">update.</a>
            #} else if (data.actionType.indexOf('follow') > -1) { #
                <a id="Follow_#:data.actionPerformerId#" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.actionPerformerId #')">#: data.actionPerformerName #</a>
                has started following you.
            #} else { #
                #len = data.nTitle.length;#
                #for (var i = 0; i < len; i++) {#
                    #: data.nTitle[i].comm #
                    #if (data.nTitle[i].pType) {#
                        # aId = data.nTitle[i].pVal + "_" + i; #
                        #if (data.nTitle[i].pType == 'user') {#
                            <a id="notification_user_#: aId #" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.notificationsUsernameLink('#: data.nTitle[i].pVal #')">#: data.nTitle[i].showText #</a>
                        #} else if (data.nTitle[i].pType == 'notification') {#
                            <a id="notification_win_#: aId #" href="\#" style="text-decoration:none;" class="shareWinAColorLine" onClick="notificationWinFunc.openNotificationsWin('#: data.nTitle[i].pVal #', '#: data.NotificationType #', '#: notificationTargetId #', '#: data.Created #')"> #: data.nTitle[i].showText # </a>
                        #} else if (data.nTitle[i].pType == 'url') {#
                            <a id="notification_url_#: i #" href="#: data.nTitle[i].pVal #" target="_blank" style="text-decoration:none;" class="shareWinAColorLine"> #: data.nTitle[i].showText # </a> 
                        #}#
                    #}#
                #}#
            #}#
        </p>
        <div style="text-align:right" class="wp_mt_10 wp_fz_9">
            #: data.passedTime #
            <div class="wp_pl_3 right">
                #if(true){#
                    <i class="main_smartstream_n_8_8"></i>
                #}else{#
                    <i class="main_smartstream_o_8_8"></i>
               #}#
            </div>
        </div>
    </div>
    <hr class='shareWinHrColor'>
</script>

<script  type="text/javascript">
    var useragent = Workport.getBrowser();
    var notificationWinFunc = (function() {
        var notificationWinType, notificationOffsetVal, currentTmpl, currentList, lastFlag, notificatinoAllList, scrollFlag, clearDiv, 
            successCode = ['WP1008', 'WP1003', 'WP1005', 'WP1001', 'WP1022'], seeAllDiv, allNotificationsHtml, smallNotificationsHtml, 
            notificationWinGetDataFlag = false, winTitle = "Notifications", conditionsFirst = {"pageSize": 10}, notificationList, notificationTmpl = $('#notification_single_message_win_template'), alertBody = $("#homepage_notifications_alert_body"), notificatinoAllTmpl = $("#notification_messages_win_template"), notificationBody = $("#homepage_notifications_messages_body"), notificationAllBody = $("#homepage_notifications_messages_body_content"), homepageNotificationsWin = $("#homepage_notifications"), loader = new Workport.Loader(homepageNotificationsWin), headerNotificationIcon = $("#homepage_notificationBtn"), headerNotificationIconSup = $('#homepage_notificationBtn sup'), loaderContent = {position:'center', imgColor:'black', textCSS:{'display': 'block', 'color':'black'}}, scrollDownLoaderContent = {position:'down', imgColor:'black', textCSS:{'display': 'none', 'color':'black'}}, resultIndex, scrollHeight;

        homepageNotificationsWin.kendoWindow({title: winTitle, visible:false, resizable: false, draggable: false, modal: true, actions: ["Close"], 
            close: function() {
                if(useragent != 'ipad' ){
                    notificationAllBody.slimScroll({scrollTo: '0px'});
                }
                alertBody.empty();
                alertBody.html(smallNotificationsHtml);
                notificationBody.empty();
                notificationBody.html(allNotificationsHtml);
                headerNotificationIconSup.hide();
                seeAllDiv.hide();
                clearDiv.hide();
            },
            position: {
                top: 50,
                left: function () {
                    homepageNotificationsWin.parent().css('left', headerNotificationIcon.offset().left - 256 / 2);
                }
            }
        });

        function difftime (serverDate, lastDate) {
            var timeDifference, passedTime, timeUnitIndex;
            var timeUnit = [24*60*60*1000, 60*60*1000, 60*1000, 1000];
            var timeWord = [' days ago', ' hr(s) ago', ' min(s) ago', ' sec(s) ago'];
            timeUnitIndex = 0;
            timeDifference = new Date(serverDate) - new Date(lastDate);
            while (timeUnitIndex < timeUnit.length) {
                passedTime = Math.floor(timeDifference/timeUnit[timeUnitIndex]);
                timeUnitIndex++;
                if (passedTime > 0) {
                    break;
                }
            }

            return passedTime.toString() + timeWord[timeUnitIndex - 1];
        }

        function setScroll () {
            if(useragent == 'ipad'){
                currentList.css('height',scrollHeight);
                currentList.css('overflow-y','scroll');
                currentList.css('overflow-x','hidden');
                currentList.bind("scroll",function(){
                        if((currentList[0].scrollTop == 0) && !scrollFlag ){ //top
                            lastFlag = false;
                            scrollFlag = false;
                            currentList.off("*");
                            currentList.empty();
                            seeAllDiv.hide();
                            clearDiv.hide();
                            loader.setContent(currentList, scrollDownLoaderContent);
                            loader.setPosition('up');
                            getAlerts(conditionsFirst);
                        } else if((currentList[0].scrollHeight <= currentList[0].scrollTop + currentList.height()) && !lastFlag && !scrollFlag){
                            scrollFlag = true;
                            loader.setContent(currentList, scrollDownLoaderContent);
                            getAlerts({"pageSize": 10, "offset": notificationOffsetVal});
                        }
                        scrollFlag = false;
                });
            }else{
                currentList.unbind('slimscroll');
                currentList.slimScroll({height: scrollHeight, wheelStep : 20, disableFadeOut: true});
                currentList.slimScroll().bind('slimscroll', function(e, pos) {
                    if('bottom' == pos && !lastFlag && !scrollFlag){
                        scrollFlag = true;
                        loader.setContent(currentList, scrollDownLoaderContent);
                        getAlerts({"pageSize": 10, "offset": notificationOffsetVal});
                    }
                    
                    if ('top' == pos && !scrollFlag) {
                        lastFlag = false;
                        scrollFlag = false;
                        currentList.off("*");
                        currentList.empty();
                        seeAllDiv.hide();
                        clearDiv.hide();
                        loader.setContent(currentList, scrollDownLoaderContent);
                        loader.setPosition('up');
                            getAlerts(conditionsFirst);
                    }
                    scrollFlag = false;
                });
            }
        }

        function getAlerts(conditions) {
            // if (notificationWinGetDataFlag) {
            //     return;
            // } else {
                // notificationWinGetDataFlag = true;
                // loader.show();
                // Workport.AlertAPI.getAlert(function (data) {
                //     loader.hide();
                //     if ($.inArray(data.ResponseCode, successCode) == -1) {
                //         Workport.utils.alertMsg(winTitle, data.message, function(_data){});
                //     } else if (data.ResponseCode == "WP1003") {
                //         lastFlag = true;
                //         if (!scrollFlag) {
                //             if (notificationWinType == 0) {
                //                 notificationList.html('<div id="hp_notifications_not_results_div" style="margin-top: 86px;" align="center">There are no notifications.</div>');
                //             } else {
                //                 notificatinoAllList.html('<div id="hp_notifications_all_not_results_div" style="margin-top: 184px;" align="center">There are no notifications.</div>');
                //             }
                //         }
                //     } else {
                //         var alertEntitiesArray = data.AlertEntities, key1 = "[", key2 = "]", nTitle, key1Index, key2Index, array, separator = "~";
                //         if (alertEntitiesArray && alertEntitiesArray.length > 0) {
                //             if (notificationWinType == 1) {
                //                 var timeDifference, passedTime, timeUnitIndex,
                //                     timeUnit = [24*60*60*1000, 60*60*1000, 60*1000, 1000],
                //                     timeWord = [' days ago', ' hr(s) ago', ' min(s) ago', ' sec(s) ago'];
                                
                //                 for (var i = 0; i < alertEntitiesArray.length; i++) {
                //                     alertEntitiesArray[i]['passedTime'] = difftime(alertEntitiesArray[i].ServerDate, alertEntitiesArray[i].Lastmodified);
                //                 }
                //             }
                //             notificationOffsetVal = alertEntitiesArray[alertEntitiesArray.length - 1].Lastmodified;

                //             for (var i = 0; i < alertEntitiesArray.length; i++) {
                //                 alertEntitiesArray[i].nIndex = resultIndex++;
                //                 nTitle = alertEntitiesArray[i].notificationTitle;
                //                 key1Index = nTitle.indexOf(key1);
                //                 key2Index = nTitle.indexOf(key2);
                //                 alertEntitiesArray[i].nTitle = [];
                //                 while (key1Index > -1 && key2Index > -1) {
                //                     array = nTitle.substring(key1Index + 1, key2Index).split(separator);
                //                     alertEntitiesArray[i].nTitle.push({'comm': nTitle.substring(0, key1Index), 'pType': $.trim(array[0]).toLocaleLowerCase(), 'pVal': $.trim(array[1]), 'showText': $.trim(array[2])});
                //                     nTitle = nTitle.substring(key2Index + 1);
                //                     key1Index = nTitle.indexOf(key1);
                //                     key2Index = nTitle.indexOf(key2);
                //                 }
                //                 if (nTitle.length > 0) {
                //                     alertEntitiesArray[i].nTitle.push({'comm': nTitle});
                //                 }
                //             }
                //             render(alertEntitiesArray);
                //             setScroll();
                //             if (notificationWinType == 0) {
                //                 seeAllDiv.show();
                //             } else {
                //                 clearDiv.show();
                //             }
                //             if (alertEntitiesArray.length < 10) {lastFlag = true;}
                //         }
                //     }
                //     notificationWinGetDataFlag = false;
                // }, conditions);
            // }
        }

        function seeAllBtnClick () {
            currentList.off("*");
            currentList.empty();
            notificationWinType = 1;
            scrollFlag = false;
            lastFlag = false;
            currentTmpl = notificatinoAllTmpl;
            currentList = notificatinoAllList;
            conditionsFirst = {"pageSize": 10};

            alertBody.hide();
            notificationBody.show();

            homepageNotificationsWin.data("kendoWindow").setOptions({width: '512px', height: '400px'});
            notificationWinFunc.setPosition();
            
            loader.setContent(homepageNotificationsWin, loaderContent);
            getAlerts(conditionsFirst);
            scrollHeight = "360px";
            setScroll();
        }

        function delAlerts () {
            Workport.AlertAPI.deleteAlert(function(responseData) {
                if ($.inArray(responseData.ResponseCode, successCode) == -1) {
                    Workport.utils.alertMsg(winTitle, responseData.ResponseMessage, function(_data){});
                } else {
                    headerNotificationIconSup.html(0);
                    headerNotificationIconSup.hide();
                    notificatinoAllList.off("*");
                    notificatinoAllList.empty();
                }
            });
        }

        function render (_data) {
            var tmpl = kendo.template($.trim(currentTmpl.html())),
                arr = [];
            
            $.map(_data, function(_elem) {
                arr.push(tmpl(_elem));
            });
            $(arr.join('')).appendTo(currentList);
        }

        function notificationWinOpen() {
            currentTmpl = notificationTmpl;
            scrollFlag = false;
            lastFlag = false;
            notificationOffsetVal = '';
            conditionsFirst = {"pageSize": 10};
            notificationWinType = 0;

            allNotificationsHtml = notificationBody.html();
            smallNotificationsHtml = alertBody.html();
            notificatinoAllList = $("#homepage_notifications_messages_body_content_list");
            notificationList = $('#homepage_notifications_alert_body_content');
            seeAllDiv = $("#homepage_notifications_alert_body_flex");
            clearDiv = $("#homepage_notifications_body_detail_flex");
            currentList = notificationList;
            $("#homepage_notifications_see_all_a").click(seeAllBtnClick);
            $("#homepage_notifications_del_alert_history").click(delAlerts);

            homepageNotificationsWin.data("kendoWindow").setOptions({width: '256px', height: '200px'});
            alertBody.show();
            notificationBody.hide();
            homepageNotificationsWin.data("kendoWindow").open();
            scrollHeight = "160px";
            setScroll();
            homepageNotificationsWin.prev().find(".k-i-close").attr("id","homepage_notifications_close");
            loader.setContent(homepageNotificationsWin, loaderContent);
            getAlerts(conditionsFirst);

            resultIndex = 0;
        }

        return {
            open : function () {
                notificationWinOpen();
            },
            notificationsUsernameLink : function  (userId) {
                homepageProfileWin.user_info_win_create(userId);
            },
            notificationsUpdateLink : function  (notificationId, notificationType, targetId, createdDate) {
                show_ss_topic_detail_win("alert", notificationId, notificationType, targetId, createdDate);
            },
            setPosition : function () {
                var size = headerNotificationIcon.offset();
                if (alertBody.is(":hidden")) {
                    homepageNotificationsWin.parent().css('left', size.left - 512 / 2);
                } else {
                    homepageNotificationsWin.parent().css('left', size.left - 256 / 2);
                }
            },
            notificationsRequestLink : function (notificationId, notificationType, targetId, createdDate) {
                Workport.StreamAPI.getStreamByNotify(function (data) {
                        if (data.ResponseCode != "WP1008") {
                            Workport.utils.alertMsg(winTitle, 'Failed to get entity link URL!', function (_data){});
                            return;
                        }
                        
                        smartstream.showDetailWindowWithURL("alert", data.notification[0].EntityLinkUrl, notificationId, notificationType, targetId, createdDate);
                    },{ notificationId: notificationId, type: notificationType, targetId: targetId, source: "alert", sync:true});
            },
            openNotificationsWin : function (notificationId, notificationType, targetId, createdDate) {
                var url;
                Workport.StreamAPI.getStreamByNotify(function (data) {
                        if (data.ResponseCode == "WP1008") {
                            url = data.notification[0].EntityLinkUrl;
                        }
                    },{ notificationId: notificationId, type: notificationType, targetId: targetId, source: "alert", sync:true});
                if (url) {
                    smartstream.showDetailWindowWithURL("alert", url, notificationId, notificationType, targetId, createdDate);
                } else {
                    show_ss_topic_detail_win("alert", notificationId, notificationType, targetId, createdDate);
                }
            }
        }
    })();

    $('#homepage_notificationBtn').on({
        click:function(e){
            notificationWinFunc.open();
        }
    });
</script>